<Html>
    <head>
        <title>页面或组件如何获取 state </title>
    </head>
    <body>
        <script>
             /*
                        三、获取 state

                                  ★\方法1：( 直接导入store 实例对象)

                                                    通过计算属性访问，但是需要在页面的根节点导入 store
                                                    
                                                    -- 页面路径:  pages/index/index.vue---
                                                    <template>
                                                            <view>
                                                                    <text>用户名： {{username}}</text>
                                                            </view>
                                                    </template>
                                                    
                                                    <script>
                                                            import store from '@/store/index.js' ;  // 需要引入 store

                                                            export default{
                                                                data(){
                                                                    return {}
                                                                },

                                                                computed:{
                                                                    username(){
                                                                        return store.state.username;
                                                                    }
                                                                }
                                                            }
                                                    <//script>


                                  ★、方法2：(已经将store 实例挂载在 Vue 原型上，并命名为 $store 属性)

                                                    在组件中，通过组件 vue 实例的 $store 访问到 state 里的数据

                                                    -- 页面路径： pages/index/index.vue ---

                                                    <template>
                                                            <view>
                                                                <text>用户名：{{ username }} </text>
                                                            </view>
                                                    </template>

                                                    <script>
                                                            export default{
                                                                data(){
                                                                    return {}
                                                                },
                                                                computed:{
                                                                    username(){
                                                                        return this.$store.state.username;
                                                                    }
                                                                }
                                                            }
                                                    <//script>
                  */
        </script>
    </body>
</Html>